<style scoped lang="stylus" type="text/stylus">
  .group-u-list {
    display : inline-block;
    width : 100px;
    height : 100px;
    text-align : center;
    line-height : 100px;
    border : 1px solid transparent;
    border-radius : 4px;
    overflow : hidden;
    background : #fff;
    position : relative;
    box-shadow : 0 1px 1px rgba(0, 0, 0, .2);
    margin-left : 10px
    img {
      width : 100%;
      height : 100%;
    }
    .group-u-list-cover {
      display : none;
      position : absolute;
      top : 0;
      bottom : 0;
      left : 0;
      right : 0;
      background : rgba(0, 0, 0, .6);
      i {
        width : 100%
        height : 100%
        color : #fff;
        font-size : 40px;
        cursor : pointer;
        margin : 0 2px;
      }
    }
    &:hover .group-u-list-cover {
      display : block;
    }
  }

</style>

<template>
  <div :class="[itemTypeG?'component-g':'component-f']">
    <div @click="flipGage(componentGData.id)" class="gf-title" v-if="itemTypeG"
         :class="gfTitle">
      <span>{{componentGData.title}}</span>
      <Icon v-if="groupTypeC" type="chevron-right"></Icon>
    </div>
    <div v-if="groupTypeFun" class="component-f flip-page">
      <componentF v-for="items in componentGData.value"
                  :key="items.id"
                  :componentFData="items"
                  :componentGData="componentGData"
                  :groupType="groupType"
                  :applyId="applyId"
                  :groupId="componentGData.id"></componentF>
    </div>

    <div v-if="groupTypeU" class="component-f">
      <div class="group-u-list" v-for="item in value">
        <template>
          <img :src="item.title">
          <div @click="handleView(item.title)" class="group-u-list-cover">
            <Icon type="ios-eye-outline"></Icon>
          </div>
        </template>
      </div>
      <Modal title="查看图片" :width="60" class-name="model-img-1" v-model="visible">
        <VuePerfectScrollbar class="model-img-ps">
          <img :src="imgUrl" v-if="visible" class="model-img" style="width: 100%">
        </VuePerfectScrollbar>
      </Modal>
    </div>

    <componentF v-if="itemTypeF"
                :componentFData="componentGData"
                :applyId="applyId"
                :groupId="groupId"></componentF>
  </div>
</template>
<style>
  .model-img-1 .ivu-modal {
    top : calc((35vh - 142px) / 2);
  }

  .model-img-ps {
    max-height : 65vh
  }

  .model-img {
    width : 100%
  }
</style>
<script>
  import componentF from './component-f.vue'

  export default {
    name      : 'componentG',
    data() {
      return {
        itemType : this.componentGData.itemType,
        groupType: this.componentGData.groupType,
        fieldType: this.componentGData.fieldType,
        value    : this.componentGData.value || [],
        items    : this.componentGData.items,
        imgUrl   : '',
        visible  : false
      }
    },
    props     : ['componentGData', 'groupId', 'componentId', 'applyId'],
    components: {
      componentF
    },
    computed  : {
      getGroupData() {
        return this.$store.getters.getGroupData
      },
      getFeildData() {

      },
      gfTitle() {
        let style = '';
        if (this.itemTypeG) {
          style = 'g-title';
          if (this.groupTypeC) {
            style += ' group-flip-page'
          }
        } else {
          style = 'f-title'
        }
        return style
      },
      groupTypeC() {
        return this.groupType == 'C'
      },
      groupTypeFun() {
        return this.groupType == 'T' || this.groupType == 'P' || this.groupType == 'M'
      },
      groupTypeU() {
        return this.groupType == 'U' && this.componentGData.status == 0
      },
      itemTypeF() {
        return this.itemType == 'F' && this.componentGData.status == 0
      },
      itemTypeG() {
        return this.itemType == 'G'
      },

    },
    methods   : {
      flipGage(id) {
        if (this.groupTypeC) {
          let url = `/component/group?groupId=${id}`;
          this.$store.commit('addComponentHistory', url)
        }
      },
      handleView(url) {
        this.imgUrl  = url;
        this.visible = true;
      },
    },
    created() {
      if (this.groupTypeU) {
      }
    }
  }
</script>
